<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    v-dialogDrag
    :fullscreen="isFullscreen"
    v-if="dialogVisible"
    :visible.sync="dialogVisible"
    :before-close="closeForm"
    width="7rem"
  >
    <div slot="title" class="header-title hd-title">
      <span>{{ dialogTitle }}</span>
      <i
        v-if="isFullscreen === false"
        class="el-icon-full-screen"
        @click="fScreen"
      ></i>
      <i v-else class="el-icon-news" @click="ifScreen"></i>
    </div>
    <el-form :model="form" :rules="rules" ref="form">
      <el-row>
        <el-col :span="24">
          <el-form-item
            label="SKU组号："
            style="text-align: left; font-weight: bold"
          >
            <template>
              {{ sku_item_No }}
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            prop="product_item_title.zh"
            :rules="[
              {
                required: true,
                message: '请输入SKU名称',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-input
              v-model="form.product_item_title.zh"
              placeholder="输入SKU组名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="dialogTitle === '新增'">
          <el-form-item prop="product_sku_id">
            <el-select
              @change="changeSelectVal"
              style="display: block"
              v-model="form.product_sku_id"
              placeholder="请选择SKU"
              filterable
            >
              <el-option
                v-for="item in product_skus"
                :key="item.val"
                :label="item.key"
                :value="item.val"
                >{{ item.key + "-" + item.content }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :header-cell-style="{
        background: '#fafafa',
        color: '#000000D9',
        fontSize: '14px',
        padding: '6px 0',
        border: '1px solid #eee',
      }"
      :cell-style="{
        color: '#606266',
        fontSize: '12px',
        padding: '6px 0',
      }"
      :data="tableData"
      style="width: 100%"
      height="2rem"
    >
      <el-table-column
        align="center"
        prop="sku_No"
        label="本地Sku号"
        width=""
      ></el-table-column>
      <el-table-column
        align="center"
        prop="product_title.zh"
        label="品名"
        width=""
      ></el-table-column>
      <el-table-column
        align="center"
        prop="hs_code"
        label="HSCODE"
      ></el-table-column>
      <el-table-column align="center" prop="amount" label="数量">
        <template slot-scope="scope">
          <el-input
            @blur="blurEnvent(scope.row, scope.column)"
            @focus="focusEnvent(scope.row, scope.column)"
            v-model="scope.row.amount"
            v-if="scope.row.isShow"
          ></el-input>
          <p v-else>
            {{ scope.row.amount }}
            <el-button
              @click="editClick(scope.row, scope.column)"
              type="text"
              size="small"
              ><i class="el-icon-edit"></i>&nbsp;修改
            </el-button>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop=""
        label="操作"
        v-if="dialogTitle === '新增'"
      >
        <template slot-scope="scope">
          <el-button
            @click="delClick(scope.$index, scope.row)"
            type="text"
            size="small"
            ><i class="el-icon-delete"></i>&nbsp;删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-button size="small" type="primary" @click="handleSubmit"
        ><i class="el-icon-circle-plus-outline"></i> 保存
      </el-button>
      <el-button size="small" @click="closeForm"
        ><i class="el-icon-circle-close"></i> 取消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { skuPreview, getSkuList, getSkuItemNo } from "@/api/coupang";

export default {
  props: {
    editData: {
      type: Object,
      default: () => ({}),
    },
    dialogTitle: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isFullscreen: false,
      form: {
        product_item_title: {
          zh: "",
        },
      },
      product_sku_item_id: "",
      product_skus: [],
      rules: {},
      tableData: [],
      sku_item_No: "",
    };
  },
  watch: {
    editData: {
      handler(val) {
        if (this.dialogTitle === "修改") {
          this.form.product_item_title = val.product_item_title;
          this.product_sku_item_id = val.product_sku_item_id;
          this.tableData = val.reslist.map((item) => {
            return { ...item, isShow: false };
          });
        }
      },
    },
    dialogVisible(val) {
      if (val) {
        this.getSkuItemNo();
        this.getSkuList();
      }
    },
  },
  methods: {
    editClick(row, column) {
      if (column.label === "数量") {
        row.isShow = !row.isShow;
      }
    },
    focusEnvent(row, column) {
      if (column.label === "数量") {
        row.oldAmount = row.amount;
      }
    },
    blurEnvent(row, column) {
      if (column.label === "数量") {
        row.isShow = !row.isShow;
        if (row.amount !== row.oldAmount) {
        }
      }
    },
    changeSelectVal(val) {
      this.skuPreview({
        sku_item_No: this.sku_item_No,
        product_sku_id: val,
      });
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let obj = [];
          let flag = true;
          let reg = /^[1-9]\d*$/;
          this.tableData.forEach((item) => {
            if (item.amount > 0 && reg.test(item.amount)) {
              obj.push({
                skuID: item.product_sku_id,
                amount: Number(item.amount),
              });
            } else {
              flag = false;
            }
          });
          if (flag) {
            if (this.dialogTitle === "修改") {
              this.$emit("submit", {
                product_sku_item_id: this.product_sku_item_id,
                product_item_title: this.form.product_item_title,
                sku_item: obj,
              });
              this.closeForm();
            } else {
              this.$emit("submit", {
                sku_item_No: this.sku_item_No,
                product_item_title: this.form.product_item_title,
                sku_item: obj,
              });
              this.closeForm();
            }
          } else {
            return this.$message.error("请输入数量");
          }
        }
      });
    },
    delClick(index, row) {
      this.tableData.splice(index, 1);
    },
    closeForm() {
      this.$emit("closeForm");
      this.isFullscreen = false;
      if (this.$refs["form"] !== undefined) {
        this.tableData = [];
        this.form = {
          product_item_title: {
            zh: "",
          },
        };
        this.$refs["form"].resetFields();
      }
    },
    fScreen() {
      this.isFullscreen = true;
    },
    ifScreen() {
      this.isFullscreen = false;
    },
    //获取SkuItemNo
    async getSkuItemNo() {
      const res = await getSkuItemNo();
      if (res.data.status === 200) {
        this.sku_item_No = res.data.data.sku_item_No;
      }
    },
    //请求SKU下拉
    async getSkuList() {
      const res = await getSkuList();
      if (res.data.status === 200) {
        this.product_skus = res.data.data.product_skus;
      }
    },
    //请求SKU列表
    async skuPreview(data) {
      const res = await skuPreview(data);
      if (res.data.status === 200) {
        console.log(res);
        let form = res.data.data;
        this.tableData.push({ ...form, isShow: false });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 11px;
}

::v-deep .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-dialog__body {
  padding: 15px 10px;
}

::v-deep .el-dialog__footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

.el-select-dropdown
  .el-scrollbar
  .el-scrollbar__view
  .el-select-dropdown__item {
  height: auto;
  padding: 0 15px;
}

.hd-title {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-right: 26px;
}

.el-icon-full-screen {
  cursor: pointer;
}

.el-icon-news {
  cursor: pointer;
}

//表格样式
// 设置表格行高度
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 50px;
}

// 表格内背景颜色
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}

// 去掉最下面的那一条线
.el-table::before {
  height: 0px;
}
</style>
